<template>
	<!-- //用户看完一部剧后，继续推荐其他三部剧 -->
	<view class="wx-authorization-modal">
		<view class="wam__mask" @touchmove.prevent="" @tap.stop="closeModal"></view>

		<!-- 内容区域 -->
		<view class="wam__wrapper">
			<!-- 标题 -->
			<view class="wam__title">这部剧已结束，以下剧情也很精彩哦</view>
			<view style=" display: flex; flex-wrap: wrap;margin: 25rpx 0rpx 10rpx 0rpx;">
				<view class="video-bd-item" v-for="(item,index) in tvList" :key="index" @click="toVideoDetail(item)">
					<view style="position:relative;">
						<image class="video-bd-pic" :src="item.tv_image" mode="aspectFill"></image>
						<text class="tagcss-bd" :style="{backgroundColor: item.tag_color,}">{{item.tv_class}}</text>
						<text class="text-all_series">共{{item.all_series}}集</text>
					</view>

					<view class=" uni-flex uni-center">
						<text
							style="color: #333333;font-size: 26rpx;align-content: center; width: 210rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
							{{item.tv_name}}</text>
					</view>
				</view>
			</view>
			
			<view style="width: 100%;margin-top: 30rpx;">
				<button style="background-color: #05C160;color: aliceblue;" @click="getTVlist">换一换</button>
			</view>
		</view>


	</view>
</template>

<script>
	//用户看完一部剧后，继续推荐其他三部剧
	export default {
		name: "advise-tv",
		options: {
			// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
			virtualHost: true
		},
		props: {
			value: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				tvList: [], // 推荐的数据
			}
		},
		created() {
			this.getTVlist()
		},
		methods: {
			getTVlist() {
				var that = this;
				vk.callFunction({
					url: 'client/pages/pub/tv_cnxh',
					// loading: false, //静默，不显示loading
					data: {
						appid: vk.vuex.get('$app.appid'),
						size: 3 //单次获取3条
					},
					success: (data) => {
						that.tvList = data.tvRank;
					}
				});
			},
			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					item = tvinfo.result.data[0]
				}
				vk.vuex.set('$app.currenttv', item)
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item._id + "&series=" + item.series,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './iconfont.css';

	.cate-text-item {
		margin: 10rpx 30rpx 10rpx 30rpx;
		width: auto;
	}

	.video-bd-item {
		margin: 10rpx;
		/* box-shadow: 0 4rpx 8rpx 0 rgba(121, 121, 121, 0.2);     */
		border-radius: 0 0 10rpx 10rpx;
		width: 205rpx;
	}

	.video-bd-pic {
		width: 100%;
		height: 280rpx;
		border-radius: 10rpx;
	}

	.tagcss-bd {
		font-size: 20rpx;
		color: #fff;
		padding: 1rpx 10rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
		position: absolute;
		left: 5rpx;
		bottom: 15rpx;
	}

	.text-all_series {
		font-size: 20rpx;
		color: #fff;
		padding: 1rpx 10rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
		position: absolute;
		right: 5rpx;
		bottom: 15rpx;
	}

	.wx-authorization-modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 99998;

		view {
			box-sizing: border-box;
		}

		.image {
			width: 100%;
			height: 100%;
			border-radius: inherit;
		}

		.wam {

			/* mask */
			&__mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				opacity: 0;
				animation: showMask 0.25s ease 0.1s forwards;
			}

			/* close-btn */
			&__close-btn {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				z-index: 99999;
			}

			/* wrapper */
			&__wrapper {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				padding: 40rpx;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
				padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
				transform-origin: center bottom;
				transform: scaleY(0);
				animation: showWrapper 0.25s ease 0.1s forwards;
				z-index: 99999;
			}

			/* title */
			&__title {
				font-size: 34rpx;
			}

			/* sub-title */
			&__sub-title {
				font-size: 26rpx;
				color: #AAAAAA;
				margin-top: 16rpx;
				padding-bottom: 30rpx;
			}


		}
	}


	@keyframes showMask {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes showWrapper {
		0% {
			transform: scaleY(0);
		}

		100% {
			transform: scaleY(1);
		}
	}
</style>
